<template>
  <div class="main-container" style="height: 100%">
    <div class="item-content" style="height: 100%">
      <div class="link" style="justify-content: space-between">
        <div>
          <el-link href="#/processequipment" type="primary">{{
            "工艺流程\u00a0>"
          }}</el-link>
          <el-link
            type="primary"
            :href="'#/manifest?flowId=' + flowId + '&flowName=' + flowName"
            >{{ "清单列表\u00a0>" }}</el-link
          >
          <el-link
            type="primary"
            :href="
              '#/equipment?flowId=' +
              flowId +
              '&flowName=' +
              flowName +
              '&listId=' +
              listId +
              '&type=' +
              type +
              '&listName=' +
              listName
            "
            >{{ "设备设施\u00a0>" }}</el-link
          >
          <el-link
            type="primary"
            :href="
              '#/maintenance-record?flowId=' +
              flowId +
              '&flowName=' +
              flowName +
              '&listId=' +
              listId +
              '&type=' +
              type +
              '&listName=' +
              listName +
              '&equipmentId=' +
              equipmentId +
              '&equipmentName=' +
              equipmentName
            "
            >{{ "维护保养\u00a0>" }}</el-link
          >
          <el-link type="info">{{ "维护记录\u00a0>" }}</el-link>
        </div>
        <div style="display: flex; font-size: 16px; align-items: center">
          <div style="margin-right: 1em">
            流程名：<span style="font-weight: 200">{{ flowName }}</span>
          </div>
          <div style="margin-right: 1em">
            清单名：<span style="font-weight: 200">{{ listName }}</span>
          </div>
          <div style="margin-right: 1em">
            清单类型：<span style="font-weight: 200" v-if="type == '1'"
              >主要设备清单</span
            >
            <span style="font-weight: 200" v-if="type == '2'"
              >主要安全设施清单</span
            >
            <span style="font-weight: 200" v-if="type == '3'">其他</span>
          </div>
          <div style="margin-right: 1em">
            设备名称: <span style="font-weight: 200">{{ equipmentName }}</span>
          </div>
        </div>
      </div>
      <div class="form-content" style="margin-bottom: 20px; height: 100%">
        <div style="height: 100%">
          <myTable
            :loading="isLoading"
            tabHeight="550"
            ref="table"
            :data="data"
            :label="label"
            :buttonShow="true"
            :addShow="true"
            :searchShow="true"
            :paginationConfig="paginationConfig"
            :pagingShow="true"
            :multiSelectShow="true"
            @deleteRow="deleteRow"
            @selectionChange="selectionChange"
            @changePage="changePage"
            @changeSize="changeSize"
            @edit="edit"
          >
            <template #first>
              <el-button type="success" @click="visible = true">新增</el-button>
              <el-button type="danger" size="default" @click="deleteList()"
                >批量删除 <i class="el-icon-delete"></i>
              </el-button>
            </template>
            <template #second>
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  gap: 10px;
                "
              >
                <el-input
                  placeholder="请输入"
                  v-model="searchValue"
                  size="small"
                  class="input-with-select"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="search"
                  ></el-button>
                </el-input>
                <el-button
                  size="small"
                  icon="el-icon-refresh"
                  @click="changeTable()"
                ></el-button>
              </div>
            </template>
            <!-- <template #flowDesc="obj">
              <el-input
                disabled
                type="textarea"
                rows="4"
                v-model="obj.params.flowDesc"
              >
              </el-input>
            </template> -->

            <template #lastCheckTime="obj">
              <el-date-picker
                disabled
                v-model="obj.params.lastCheckTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
            <template #checkExpireTime="obj">
              <el-date-picker
                disabled
                v-model="obj.params.checkExpireTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
            <template #lastCheckLink="obj">
              <el-link
                :href="obj.params.lastCheckLink"
                target="_blank"
                type="primary"
                >点击跳转</el-link
              >
            </template>
            <template #name="obj">
              <el-link
                :href="
                  '#/maintenance-detail?flowId=' +
                  flowId +
                  '&flowName=' +
                  flowName +
                  '&listId=' +
                  listId +
                  '&type=' +
                  type +
                  '&listName=' +
                  listName +
                  '&equipmentId=' +
                  equipmentId +
                  '&equipmentName=' +
                  equipmentName +
                  '&recordId=' +
                  obj.params.id +
                  '&recordName=' +
                  obj.params.name
                "
                type="primary"
                >{{ obj.params.name }}</el-link
              >
            </template>
          </myTable>
          <myDialog
            :Form="Form"
            :label="label2"
            :visible="visible"
            @disVisible="visible = false"
            @submitSecurity="submitSecurity"
            :span="12"
          >
            <template #lastCheckTime="obj">
              <el-date-picker
                v-model="obj.params.row.lastCheckTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
            
            <template #checkExpireTime="obj">
              <el-date-picker
                v-model="obj.params.row.checkExpireTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </myDialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineComponent, onMounted } from "vue";
import myTable from "@/components/my-table.vue";
import router from "@/router";

//流程id
const flowId = ref(router.history.current.query.flowId);
//流程名字
const flowName = ref(router.history.current.query.flowName);
//清单id
const listId = ref(router.history.current.query.listId);
//清单名
const listName = ref(router.history.current.query.listName);
//清单类型
const type = ref(router.history.current.query.type);
//设备id
const equipmentId = ref(router.history.current.query.equipmentId);
//设备名
const equipmentName = ref(router.history.current.query.equipmentName);
//改名字
const NewComponentName = defineComponent({
  name: "NewComponentName",
});
console.log(NewComponentName);

import { Notification } from "element-ui";
import {
  saveRecord,
  queryRecords,
  queryRecord,
  updateRecord,
  deleteRecord,
} from "@/api/processequipment/index";
//是编辑还是新增
const flagEdit = ref(false);
// 编辑
const edit = (row) => {
  Form.value = { ...row };
  visible.value = true;
  flagEdit.value = true;
};
//选中的id
const table = ref(null);
// dialog From
const Form = ref({
  id: null,
  equipmentId: equipmentId.value,
  lastCheckLink: null, //上一次检测报告链接
  lastCheckTime: null, //上一次检测日期
  checkExpireTime: null, //检测到期时间
});
//设置返回的数据
const field = ref([
  "id",
  "equipmentId",
  "lastCheckLink",
  "lastCheckTime",
  "checkExpireTime",
  "name",
]);
// dialog 是否 show
const visible = ref(false);
// 点击确定时：
const submitSecurity = async (form) => {
  form.value.equipmentId = equipmentId.value;
  for (var key in form.value) {
    if (!field.value.includes(key)) {
      delete form.value[key];
    }
    if (key == "imgUrl" || key == "id") continue;
    if (form.value[key] === "" || form.value[key] === null) {
      Notification({
        title: "失败",
        message: "请检查参数",
        type: "error",
      });
      console.log("form.value");
      console.log(form.value);
      return;
    }
  }
  //更新
  if (flagEdit.value == true) {
    let res = await updateRecord(form.value);
    if (res.code == 0) {
      Notification({
        title: "成功",
        message: "修改成功",
        type: "success",
      });
      changeTable();
    } else {
      Notification({
        title: "失败",
        message: "修改失败",
        type: "error",
      });
    }
    flagEdit.value = false;
  } else {
    //新增
    console.log("新的：");
    console.log(form.value);
    let res = await saveRecord(form.value);
    if (res.code == 0) {
      Notification({
        title: "成功",
        message: "新增成功",
        type: "success",
      });
      paginationConfig.value.page = 1;
      changeTable();
    } else {
      Notification({
        title: "失败",
        message: "新增失败",
        type: "error",
      });
    }
  }
  visible.value = false;
  Form.value = {};
};
const data = ref([]);
//table label
const label = ref([
  {
    label: "名称(设备或仪器仪表)",
    prop: "name",
    columnType: "slot",
    slotName: "name",
  },

  {
    label: "上一次检测日期",
    prop: "lastCheckTime",
    columnType: "slot",
    slotName: "lastCheckTime",
  },

  {
    label: "上一次检测报告链接",
    prop: "lastCheckLink",
    columnType: "slot",
    slotName: "lastCheckLink",
  },
  {
    label: "检测到期时间",
    prop: "checkExpireTime",
    columnType: "slot",
    slotName: "checkExpireTime",
  },
]);
//dialog label
const label2 = ref([
  {
    label: "名称(设备或仪器仪表)",
    prop: "name",
  },

  {
    label: "上一次检测日期",
    prop: "lastCheckTime",
    columnType: "slot",
    slotName: "lastCheckTime",
  },

  {
    label: "上一次检测报告链接",
    prop: "lastCheckLink",
  },
  {
    label: "检测到期时间",
    prop: "checkExpireTime",
    columnType: "slot",
    slotName: "checkExpireTime",
  },
]);
const searchValue = ref();
//按照id搜索
const search = async () => {
  let res = await queryRecord(searchValue.value, equipmentId.value);
  data.value = [];
  if (res.code == 0) {
    data.value = res.data;
    Notification({
      title: "成功",
      message: "查询成功",
      type: "success",
    });
  } else {
    Notification({
      title: "失败",
      message: res.message,
      type: "error",
    });
  }
};
//分页对象
const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
//页数改变触发
const changePage = (val) => {
  paginationConfig.value.page = val;
  changeTable();
};
//显示数量改变触发
const changeSize = (val) => {
  paginationConfig.value.size = val;
  changeTable();
};

const isLoading = ref(true);
//组件通讯获取选中的id
const deleteRow = (id) => {
  selectList.value = [id];
  deleteList();
};
//刷新table
const changeTable = async () => {
  searchValue.value = "";
  isLoading.value = true;
  let res = await queryRecords(
    paginationConfig.value.page,
    paginationConfig.value.size,
    equipmentId.value
  );
  console.log("这是结果");
  console.log(res);
  if (res.data?.total != null) {
    paginationConfig.value.total = Number(res.data.total);
  }
  isLoading.value = false;
  data.value = res.data?.list;
};
//进入页面刷新
onMounted(() => {
  changeTable();
});
//批量选择的数据
const selectList = ref([]);
const selectionChange = (value) => {
  selectList.value = value;
};
//删除所选中的
const deleteList = async () => {
  if (selectList.value.length == 0) {
    Notification({
      title: "警告",
      message: "请选择要删除的项",
      type: "warning",
    });
    return;
  }
  let result = await deleteRecord(selectList.value);
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "删除成功",
      type: "success",
    });
    paginationConfig.value.page = 1;
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "删除失败",
      type: "error",
    });
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  height: auto !important;
}
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
::v-deep .el-upload-list__item {
  transition: none !important;
}
::v-deep .el-upload-list__item-thumbnail {
  /* 图片在方框内显示长边 */
  object-fit: scale-down !important;
}

:deep(.el-input__inner) {
  height: auto !important;
}
:deep(.el-icon-arrow-right:before) {
  font-size: 12px !important;
}
:deep(.el-table th) {
  background: #fafafa;
}
:deep(.el-collapse-item__header) {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  padding: 0 10px;
}
:deep(.el-icon-arrow-right:before) {
  font-weight: bold;
  color: #333;
  font-size: 25px;
}
:deep(.main) {
  height: 100%;
}
:deep(.el-menu--horizontal > .el-submenu .el-submenu__title) {
  height: 54px;
  line-height: 54px;
}
.link {
  display: flex;
  font-size: 2em;
  font-weight: 700;
  width: 100%;
  height: 2em;
  :deep(.el-link) {
    font-size: 0.7em;
  }
}
:deep(.el-link) {
  margin-right: 0.5em;
  font-size: 1em;
}
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
/*去除upload组件过渡效果*/

.main-header-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  flex-grow: 0;
  margin-bottom: 12px;

  .title {
    position: relative;
    font-weight: bold;
    color: #333;
    font-size: 15px;
    padding-left: 16px;

    &::after {
      content: "";
      width: 3px;
      height: 16px;
      background-color: #82a848;
      left: 0;
      top: calc(50% - 8px);
      position: absolute;
    }

    &::before {
      content: "";
      width: 3px;
      height: 16px;
      background-color: #82a848;
      left: 5px;
      top: calc(50% - 8px);
      position: absolute;
    }
  }

  .main-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}
body {
  min-height: 100vh;

  transition: all 0.3s ease;
}
.container {
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 12px 15px;

  .item-content {
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}
.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>